<template>
  <div class="tp-box">
    <a-drawer
      :visible="vprops.vvisible"
      :width="vprops.width"
      :closable="vprops.vclosable"
      :destroyOnClose="vprops.vdestroyOnClose"
      @close="handleVillageClose"
    >
      <template #title>
        <div class="title-detail">
          <Tooltip placement="top">
            <template #title>
              <span>{{ getTipTitle }}</span>
            </template>
            <h3>{{ getTitle }}</h3>
          </Tooltip>
          <a-space direction="vertical" :size="12">
            <!-- <a-range-picker v-model:value="value4" :format="dateFormat" /> -->
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-space class="search-btn" style="display: none;">
            <a-button type="primary" @click="handleExport">导出明细</a-button>
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
      </template>

      <!-- :scroll="{ x: 1500, y: 600 }" -->
      <a-table
        :columns="v_computedTableColumn"
        :data-source="v_computedTableData"
        :page-size-options="v_pageSizeOptions"
        :loading="v_loading"
        bordered
        :pagination="false"
        size="middle"
        :scroll="{ x: 'calc(700px + 50%)', y: vprops._detailTableHeight }"
      >
        <!-- <template #action>
          <a>action</a>
        </template> -->
      </a-table>
      <div class="pagination">
        <a-pagination
          show-size-changer
          v-model:current="v_pageIndex"
          v-model:pageSize="v_pageSize"
          :total="v_total"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </a-drawer>
  </div>
</template>
<script setup lang="ts">
  import { Tooltip } from 'ant-design-vue';
  import { ref, computed, onMounted, watch } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { getrymjcsvillageList } from '/@/api/demo/system';  //核查村级工作进展
  import { downloadByUrl } from '/@/utils/file/download';
  import { useGlobSetting } from '/@/hooks/setting';
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  // 默认传过来的值q
  const vprops = defineProps({
    vvisible: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    detailTableHeight: {
      type: Number,
      default: 600,
    },
    hzfs: {
      type: String,
      default: '',
    },
    vclosable: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    vdetailParams: {
      type: Object,
      default: () => {},
    },
    vcurrentXzqdmname: {
      type: String,
      default: '',
    },
    vcurrentTitle: {
      type: Object,
      default: () => {},
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    vdestroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
  });
  let v_pageIndex = ref(1);
  let v_pageSize = ref(100);
  let v_loading = ref(false);
  const vvisible = ref(true);
  const v_pageSizeOptions = ref<string[]>(['100', '200', '300']);
  let v_tableSource = ref<any>([]);
  let v_total = ref(0);
  const v_columns = [
    { title: '序号', width: 50, dataIndex: 'idex', key: 'idex', align: 'center', fixed: 'left' },
    {
      title: '村级名称',
      dataIndex: 'village',
      key: 'village',
      align: 'left',
      width: 240,
    },
    {
      title: '餐饮',
      dataIndex: 'cy_count',
      key: 'cy_count',
      align: 'center',
      width: 100,
    },
    {
      title: '商店',
      dataIndex: 'sd_count',
      key: 'sd_count',
      align: 'center',
      width: 100,
    },
    {
      title: '美容美发',
      dataIndex: 'mrmf_count',
      key: 'mrmf_count',
      align: 'center',
      width: 150,
    },
    {
      title: 'KTV',
      dataIndex: 'ktv_count',
      key: 'ktv_count',
      align: 'center',
      width: 100,
    },
    {
      title: '网吧',
      dataIndex: 'wb_count',
      key: 'wb_count',
      align: 'center',
      width: 100,
    },
    {
      title: '美甲美睫',
      dataIndex: 'mjmj_count',
      key: 'mjmj_count',
      align: 'center',
      width: 150,
    },
    {
      title: '棋牌室',
      dataIndex: 'qps_count',
      key: 'qps_count',
      align: 'center',
      width: 150,
    },
    {
      title: '茶社',
      dataIndex: 'cs_count',
      key: 'cs_count',
      align: 'center',
      width: 150,
    },
    {
      title: '足疗、按摩',
      dataIndex: 'zlam_count',
      key: 'zlam_count',
      align: 'center',
      width: 150,
    },
    {
      title: '教学培训',
      dataIndex: 'jxpx_count',
      key: 'jxpx_count',
      align: 'center',
      width: 150,
    },
    {
      title: '医疗诊所',
      dataIndex: 'ylzs_count',
      key: 'ylzs_count',
      align: 'center',
      width: 150,
    },
    {
      title: '加工生产',
      dataIndex: 'jgsc_count',
      key: 'jgsc_count',
      align: 'center',
      width: 150,
    },
    {
      title: '其它',
      dataIndex: 'qt_count',
      key: 'qt_count',
      align: 'center',
      width: 150,
    },
  ];
  // 计算属性，用于实时更新数据到页面上
  const v_computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = v_columns;
    return newColumn;
  });
  const v_computedTableData = computed(() => {
    console.log(v_tableSource.value);
    return v_tableSource.value;
  });
  const getTitle = computed(() => {
    let str = `【${vprops.vcurrentTitle.title}】的人员密集统计`;
    console.log('lenght', str.length);
    if (str.length > 50) {
      str = str.substring(0, 50) + '...';
    }
    return str;
  });
  const getTipTitle = computed(() => {
    let str = vprops.vcurrentTitle.title;
    return str;
  });
  watch(
    () => vprops.vvisible,
    (newVal, oldVal) => {
      // 在这里执行你需要的操作
      if (newVal) {
        console.log('@参数', vprops.vdetailParams);
        getTableData_v();
      }
    },
  );
  const getTableData_v = async () => {
    let params: any = {
      pageindex: v_pageIndex.value,
      pagesize: v_pageSize.value,
      ...vprops.vdetailParams,
    };

    v_loading.value = true;
    let res = await getrymjcsvillageList(params);
    v_loading.value = false;
    let cy_count = ttotal(res.items, 'cy_count');
    let sd_count = ttotal(res.items, 'sd_count');
    let mrmf_count = ttotal(res.items, 'mrmf_count');
    let ktv_count = ttotal(res.items, 'ktv_count');
    let wb_count = ttotal(res.items, 'wb_count');
    let mjmj_count = ttotal(res.items, 'mjmj_count');
    let qps_count = ttotal(res.items, 'qps_count');
    let cs_count = ttotal(res.items, 'cs_count');
    let zlam_count = ttotal(res.items, 'zlam_count');
    let jxpx_count = ttotal(res.items, 'jxpx_count');
    let ylzs_count = ttotal(res.items, 'ylzs_count');
    let jgsc_count = ttotal(res.items, 'jgsc_count');
    let qt_count = ttotal(res.items, 'qt_count');
    let vallObj = {
      village: '汇总',
      cy_count: cy_count,
      sd_count: sd_count,
      mrmf_count: mrmf_count,
      ktv_count: ktv_count,
      wb_count: wb_count,
      mjmj_count: mjmj_count,
      qps_count: qps_count,
      cs_count: cs_count,
      zlam_count: zlam_count,
      jxpx_count: jxpx_count,
      ylzs_count: ylzs_count,
      jgsc_count: jgsc_count,
      qt_count: qt_count,
    };

    let list = res.items;
    v_tableSource.value = list;
    v_tableSource.value.push(vallObj);
    v_total.value = res.total;
    // console.log('@resqqq', list);
  };

  // 计算总数的方法
  function ttotal(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }
  function handleExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url:
        uriBase +
        '/export/rymjcs/exportrymjcs?access_token=' +
        tk +
        '&towndm=' +
        vprops.vdetailParams.towndm,
      target: '_blank',
    });
  }
  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);
  const handleVillageClose = () => {
    vvisible.value = false;
    emit('close');
    console.log('************8vvisible*************', vprops.vvisible);
  };
  // 切换页码的时候更新  pageIndex 和  pageSize
  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    // pageIndex.value = pageIndex;
    // pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  watch(v_pageSize, () => {
    getTableData_v();
  });
  watch(v_pageIndex, () => {
    getTableData_v();
  });
  onMounted(() => {
    getTableData_v();
  });
</script>
<style lang="less" scoped>
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
</style>
